<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Bootstrap learn</title>

  <!-- 从cdn引入css文件 -->
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  <h1>form</h1>
  <br>

  <h3>Basic form</h3>
  <br>

  <h2> Basic form </h2>
  <div class="row">
    <div class="col-sm-5" style="background: pink">
      <div class="panel-body">
        <form role="form">
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input id="exampleInputFile" type="file">
            <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
          <button type="submit" class="btn btn-info">Submit</button>
        </form>
      </div>
    </div>
  </div>
  <br><br>

  <h3> Horizontal form </h3>
  <div class="row">
    <div class="col-sm-5" style="background: pink">
      <div class="panel-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
            <div class="col-lg-10">
              <input class="form-control" id="inputEmail1" placeholder="Email" type="email">
              <p class="help-block">Example block-level help text here.</p>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
            <div class="col-lg-10">
              <input class="form-control" id="inputPassword1" placeholder="Password" type="password">
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-offset-2 col-lg-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-offset-2 col-lg-10">
              <button type="submit" class="btn btn-danger">Sign in</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <h2> Inline form </h2>
  <div class="row">
    <div class="col-sm-5" style="background: pink">
      <div class="panel-body">
        <form class="form-inline" role="form">
          <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input class="form-control" id="exampleInputEmail2" placeholder="Enter email" type="email">
          </div>
          <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input class="form-control" id="exampleInputPassword2" placeholder="Password" type="password">
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
          <button type="submit" class="btn btn-success">Sign in</button>
        </form>
      </div>
    </div>
  </div>
  <br><br>


  <h3> Modal form </h3>
  <div class="row">
    <div class="col-sm-5" style="background: pink">
      <div class="panel-body">
        <!-- button to generate model form -->
        <a href="#myModal" data-toggle="modal" class="btn btn-xs btn-success">
          Form in Modal
        </a>
        <!-- model form settings -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" ␣class="modal fade">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                <h4 class="modal-title">Form Tittle</h4>
              </div>
              <div class="modal-body">
                <!-- actual form -->
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input class="form-control" id="exampleInputEmail3" placeholder="Enter email" type="email">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input class="form-control" id="exampleInputPassword3" placeholder="Password" type="password">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input id="exampleInputFile3" type="file">
                    <p class="help-block">Example block-level help text here.</p>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> Check me out
                    </label>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <!-- actual form ends -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>

  <!-- 从cdn引入 jquery bootstrap库 -->
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

</body>

</html>
